<template>
	<div class="zBox">
		<div class="qjButtonBox">
			<div class="qjBut" @click="approval">
				<el-icon style="vertical-align: middle" :color="'#ffffff'"><Edit /></el-icon>
				<span style="vertical-align: middle;margin-left: 8px;">请假申请</span>
			</div>
		</div>
		<el-table class="qjTable" v-loading="loading" :data="typeList" stripe>
			<el-table-column label="姓名" align="center" prop="createBy" />
			<el-table-column label="类型" align="center" prop="type_mc" />
			<el-table-column label="开始时间" align="center" prop="startTime" />
			<el-table-column label="结束时间" align="center" prop="endTime" />
			<el-table-column label="请假时长" align="center" prop="absenceDuration" />
			<el-table-column label="提交时间" align="center" prop="createTime" />
			<el-table-column label="状态" align="center">
				<template #default="scope">
					<div class="ztbox">
						<div class="dian" :style="{ background: qjzt[scope.row.state].color }"></div>
						<span :style="{ color: qjzt[scope.row.state].color }">{{ qjzt[scope.row.state].lable }}</span>
					</div>
				</template>
			</el-table-column>
			<el-table-column label="操作" align="center" width="230">
				<template #default="scope">
					<div class="czan">
						<div
							v-if="(scope.row.state == 2 || scope.row.state == 4 || scope.row.state == 6) && scope.row.isLookXj"
							class="czBut xj"
							@click="reportBack(scope.row.absenceId)"
						>
							{{ scope.row.state == 4 || scope.row.state == 6 ? '编辑' : '销假' }}
						</div>
						<div v-if="scope.row.state == 1 && scope.row.isEdit" class="czBut bjckdj" @click="edit(scope.row.absenceId)">编辑</div>
						<div v-if="scope.row.state == 1 && scope.row.isEdit" class="czBut sc" @click="delForm(scope.row)">删除</div>
						<div class="czBut bjckdj" @click="detail(scope.row.absenceId)">查看</div>
						<!-- <div v-if="scope.row.state !== 1 && scope.row.state !== 3" title="打印" class="czBut bjckdj" @click="printerrow2(scope.row.absenceId)">打印</div>
						<div style="display: none;" ref="print" v-print="printDivdyAll" v-if="scope.row.state !== 1 && scope.row.state !== 3" title="打印" class="czBut bjckdj">
							打印
						</div> -->
					</div>
				</template>
			</el-table-column>
		</el-table>
		<pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" @pagination="getList" />
		<!-- 请假申请弹框 -->
		<el-dialog class="qjdialog" v-model="qjDialogVisible" :close-on-click-modal="false" title="请假申请" top="12vh" width="38.5%">
			<el-form ref="ruleFormRef" :model="qjForm" :rules="qjRules" label-width="83px">
				<div class="left">
					<el-form-item label="请假类型" prop="type">
						<el-select style="width: 83%;" v-model="qjForm.type" placeholder="请选择">
							<el-option v-for="item in absence_type" :key="item.value" :label="item.label" :value="item.value" />
						</el-select>
					</el-form-item>
					<el-form-item label="开始时间" prop="startTime">
						<el-date-picker
							class="datePicker"
							style="width: 83%;"
							value-format="YYYY-MM-DD HH:mm"
							format="YYYY-MM-DD HH:mm"
							:default-value="defaultstartTime"
							:default-time="defaultstartTime"
							v-model="qjForm.startTime"
							type="datetime"
							placeholder="请选择日期时间"
							@change="startTimeChange"
							:disabled-hours="disabledHours"
							:disabled-minutes="disabledMinutes"
							:disabled-seconds="disabledSeconds"
						/>
					</el-form-item>
					<el-form-item label="结束时间" prop="endTime">
						<el-date-picker
							style="width: 83%;"
							value-format="YYYY-MM-DD HH:mm"
							format="YYYY-MM-DD HH:mm"
							:default-value="defaultendTime"
							:default-time="defaultendTime"
							v-model="qjForm.endTime"
							type="datetime"
							placeholder="请选择日期时间"
							@change="endTimeChange"
							:disabled-hours="disabledHours"
							:disabled-minutes="disabledMinutes"
							:disabled-seconds="disabledSeconds"
						/>
					</el-form-item>

					<el-form-item class="xyHeight" style="margin: 0 !important;" label="请假时长" prop="absenceDuration">
						<el-input style="width: 83%;" v-model="qjForm.absenceDuration" placeholder="0" disabled>
							<template #append>
								小时
							</template>
						</el-input>
						<el-checkbox style="margin-right: 20px;" v-model="checked">使用调休</el-checkbox>

						<p style="margin:0">
							可调休
							<span style="color: red;">{{ overWorkHour }}小时</span>
						</p>
					</el-form-item>
					<el-form-item label="请假事由:" prop="reason"><el-input style="width: 83%;" type="textarea" v-model="qjForm.reason" rows="2"></el-input></el-form-item>
				</div>
				<div class="right">
					<el-form-item class="spr" label="审核人" prop="approveId">
						<el-select style="width: 100%;" v-model="qjForm.approveId" @change="appoversChange" filterable allow-create default-first-option placeholder="请选择人员">
							<el-option v-for="item in userOptions" :key="item.value" :label="item.label" :value="item.value">
								<div class="userOption">
									<img :src="item.headImg" alt="" />
									<span>{{ item.label }}</span>
								</div>
							</el-option>
						</el-select>
					</el-form-item>
					<div v-if="sprData.label" class="spBox sxm">
						<img :src="sprData.headImg" />
						<p>{{ sprData.label }}</p>
					</div>
					<el-form-item class="csr" label="抄送人" prop="copyIds">
						<el-select
							style="width: 100%;"
							v-model="qjForm.copyIds"
							multiple
							@change="copyChange"
							filterable
							allow-create
							default-first-option
							placeholder="请选择人员"
						>
							<el-option v-for="item in userOptions" :key="item.value" :label="item.label" :value="item.value">
								<div class="userOption">
									<img :src="item.headImg" alt="" />
									<span>{{ item.label }}</span>
								</div>
							</el-option>
						</el-select>
					</el-form-item>
					<div v-if="csrData.length > 0" class="csrBox">
						<div v-for="(item, index) in csrData" class="spBox2">
							<img :src="item.headImg" />
							<p style="text-align: center;">{{ item.label }}</p>
						</div>
					</div>
				</div>
			</el-form>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="qjDialogVisible = false">取消</el-button>
					<el-button type="primary" @click="submitForm(ruleFormRef)">保存</el-button>
				</span>
			</template>
		</el-dialog>
		<!--销假 -->
		<el-dialog class="qjdialog" v-model="xjDialogVisible" :close-on-click-modal="false" title="销假申请" top="8vh" width="45%">
			<div class="shbj">请假申请</div>

			<table class="mailTable">
				<tr>
					<td class="column ">姓名</td>
					<td class="nrkd">{{ qjDetail.createBy }}</td>
					<td class="column">提交时间</td>
					<td class="nrkd">{{ qjDetail.createTime }}</td>
				</tr>
				<tr>
					<td class="column ">开始时间</td>
					<td class="nrkd">{{ qjDetail.startTime }}</td>
					<td class="column ">结束时间</td>
					<td class="nrkd">{{ qjDetail.endTime }}</td>
				</tr>
				<tr>
					<td class="column ">请假类型</td>
					<td class="nrkd">{{ qjDetail.type }}</td>

					<td class="column ">抄送人</td>
					<td class="nrkd">{{ qjDetail.copyNames }}</td>
				</tr>
				<tr>
					<td class="column ">请假时长</td>
					<td class="nrkd">{{ qjDetail.absenceDuration }}小时</td>
					<td class="column">调休时长</td>
					<td class="nrkd">{{ qjDetail.sabbaticalHour }}小时</td>
				</tr>
				<tr>
					<td class="column">请假事由</td>
					<td class="nrkd lineHeight" colspan="3">{{ qjDetail.reason || '暂无' }}</td>
				</tr>
				<tr >
					<td class="column">审核进度</td>
					<td class="nrkd lineHeight" colspan="3">
						<p class="jdbox" style="display: flex;" v-for="(item, index) in auditList">
							<span class="spzt" :class="{ytg:item.status==2,btg:item.status==3,dsh:item.status==1}"></span>
							<span class="xuLine" style="position: absolute;width: 2px;height: 20px;border: 1px dashed #ccc;"></span>
							<span>
								{{
									item.approveUser +
										'\xa0\xa0\xa0' +
										(item.status == 1 ? '待审核' : item.approveTime) +
										'\xa0\xa0\xa0' +
										(item.approveReason ? item.approveReason : '')
								}}
							</span>
						</p>
					</td>
				</tr>
				
			</table>

			<div class="shbj sptop">销假申请</div>
			<el-form ref="xjFormRule" :model="xjForm" :rules="xjRules" label-width="80px">
				<div class="left">
					<el-form-item label="销假时间" prop="reportBackTime">
						<el-date-picker
							style="width: 83%;"
							type="datetime"
							placeholder="选择日期"
							v-model="xjForm.reportBackTime"
							value-format="YYYY-MM-DD HH:mm"
							format="YYYY-MM-DD HH:mm"
							@change="xjChange"
							:disabled-hours="disabledHours"
							:disabled-minutes="disabledMinutes"
							:disabled-seconds="disabledSeconds"
						></el-date-picker>
					</el-form-item>
					<el-form-item class="xyHeight" label="销假时长" prop="reportBackDuration">
						<el-input style="width: 83%;" v-model="xjForm.reportBackDuration" disabled placeholder="0">
							<template #append>
								小时
							</template>
						</el-input>
					</el-form-item>
				</div>
				<div class="right">
					<el-form-item class="bz" label="备注" prop="reportBackReason">
						<el-input style="width: 100%;" type="textarea" v-model="xjForm.reportBackReason" rows="6"></el-input>
					</el-form-item>
				</div>
			</el-form>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="xjDialogVisible = false">取消</el-button>
					<el-button type="primary" @click="submitXjForm(xjFormRule)">保存</el-button>
				</span>
			</template>
		</el-dialog>
		<!-- 请假申请的查看-->

		<el-dialog class="qjdialog" v-model="detailDialogVisible" :close-on-click-modal="false" title="请假申请" top="8vh" width="45%">
			<div class="shbj">请假信息</div>
			<table class="mailTable">
				<tr>
					<td class="column ">姓名</td>
					<td class="nrkd">{{ qjDetail.createBy }}</td>
					<td class="column">提交时间</td>
					<td class="nrkd">{{ qjDetail.createTime }}</td>
				</tr>
				<tr>
					<td class="column ">开始时间</td>
					<td class="nrkd">{{ qjDetail.startTime }}</td>
					<td class="column ">结束时间</td>
					<td class="nrkd">{{ qjDetail.endTime }}</td>
				</tr>
				<tr>
					<td class="column ">请假类型</td>
					<td class="nrkd">{{ qjDetail.type }}</td>

					<td class="column ">抄送人</td>
					<td class="nrkd">{{ qjDetail.copyNames }}</td>
				</tr>
				<tr>
					<td class="column ">请假时长</td>
					<td class="nrkd">{{ qjDetail.absenceDuration }}小时</td>
					<td class="column">调休时长</td>
					<td class="nrkd">{{ qjDetail.sabbaticalHour }}小时</td>
				</tr>
				<tr>
					<td class="column">请假事由</td>
					<td class="nrkd lineHeight" colspan="3">{{ qjDetail.reason || '暂无' }}</td>
				</tr>
				<tr >
					<td class="column">审核进度</td>
					<td class="nrkd lineHeight" colspan="3">
						<p class="jdbox" style="display: flex;" v-for="(item, index) in auditList">
							<span class="spzt" :class="{ytg:item.status==2,btg:item.status==3,dsh:item.status==1}"></span>
							<span class="xuLine" style="position: absolute;width: 2px;height: 20px;border: 1px dashed #ccc;"></span>
							<span>
								{{
									item.approveUser +
										'\xa0\xa0\xa0' +
										(item.status == 1 ? '待审核' : item.approveTime) +
										'\xa0\xa0\xa0' +
										(item.approveReason ? item.approveReason : '')
								}}
							</span>
						</p>
					</td>
				</tr>
			</table>
<!-- 审核信息 -->
			<!-- <table v-if="qjDetail.state !== 4 && qjDetail.state !== 1" class="mailTable"></table> -->

			<div v-if="qjDetail.state >=4" class="shbj sptop">销假信息</div>
			<table v-if="qjDetail.state >=4" class="mailTable">
				<!-- 销假信息 -->
				<tr>
					<td class="column ">销假时间</td>
					<td class="nrkd">{{ xjDetail.reportBackTime }}</td>
					<td class="column ">销假时长</td>
					<td class="nrkd">{{ xjDetail.reportBackDuration }}小时</td>
				</tr>
				<tr>
					<td class="column">备注</td>
					<td class="nrkd lineHeight" colspan="3">{{ xjDetail.reportBackReason || '暂无' }}</td>
				</tr>
			</table>

			<table v-if="qjDetail.state == 5 || qjDetail.state == 6" class="mailTable">
				<!-- 销假审核信息 -->
				<tr>
					<td class="column ">审核人</td>
					<td class="nrkd">{{ qjDetail.approveUser }}</td>
					<td class="column ">审核时间</td>
					<td class="nrkd">{{ xjDetail.approveTime }}</td>
				</tr>
				<tr>
					<td class="column">审核理由</td>
					<td class="nrkd lineHeight" colspan="3">{{ xjDetail.approveReason || '暂无' }}</td>
				</tr>
				<tr>
					<td class="column ">实际请假</td>
					<td class="nrkd">{{ qjDetail.actualAbsence }}小时</td>
					<td class="column">实际调休</td>
					<td class="nrkd">{{ qjDetail.actualSabbatical }}小时</td>
				</tr>
			</table>
		</el-dialog>

		<div style="display: none;">
			<div id="printDivdyAll">
				<h1 style="text-align: center;">请假条</h1>
				<div style="text-align: right;font-size:20px;margin-bottom: 0;">{{ moment(printerContent.createTime).format('YYYY年MM月DD日') }}</div>
				<table border="1" cellspacing="0">
					<tr class="zhai">
						<td class="shense">姓名</td>
						<td>{{ printerContent.createBy }}</td>
						<td class="shense">部门</td>
						<td>{{ deptName }}</td>
					</tr>
					<tr class="zhai">
						<td class="shense">职务</td>
						<td>{{ postNames }}</td>
						<td class="shense">请假时长</td>
						<td>{{ printerContent.absenceDuration }}小时</td>
					</tr>
					<tr class="zhai">
						<td class="shense">调休时长</td>
						<td>{{ printerContent.sabbaticalHour || 0 }}小时</td>
						<td class="shense">实际请假</td>
						<td>{{ printerContent.actualAbsence }}小时</td>
					</tr>
					<tr class="kuan">
						<td class="shense">请假时间</td>
						<td class="shense" colspan="3">{{ printerContent.startTime + '至' + printerContent.endTime }}</td>
					</tr>
					<tr class="kuan">
						<td class="shense">请假事由</td>
						<td colspan="3">{{ printerContent.reason }}</td>
					</tr>
					<tr class="kuan">
						<td class="shense">批准意见</td>
						<td>同意</td>
						<td class="shense">批准人</td>
						<td>{{ printerContent.approveUser }}</td>
					</tr>
					<tr class="kuan">
						<td class="shense">申请人(签字)</td>
						<td></td>
						<td class="shense">审核人(签字)</td>
						<td></td>
					</tr>
				</table>
			</div>
		</div>
	</div>
</template>

<script lang="ts" setup>
import { getUserOptions, getAbsenceList,absenceAdd,deleteAbsence, getAbsenceDetail,getDuration,updateAbsence,getOverworkHour,absencerReportBack,editReportBack} from '@/api/hkd';
import useUserStore from '@/store/modules/user';
import moment from 'moment';

import {nextTick} from 'vue';
import headurl from '@/assets/images/head.png';
import type { FormInstance, FormRules } from 'element-plus';
import { ElMessage, ElMessageBox } from 'element-plus'
const ruleFormRef = ref<FormInstance>()
const xjFormRule = ref<FormInstance>()
const detailDialogVisible = ref(false);
const xjDetail = ref({});
// import { reactive } from 'vue';
const typeList = ref([]);
const total = ref(0);
const loading = ref(true);
const root = ref(null);
const auditList = ref([]);
const userId = ref(useUserStore().userId);
const postNames = ref(useUserStore().postNames.toString());
const deptName = ref(useUserStore().deptName);
const qjDialogVisible = ref(false);
const xjDialogVisible = ref(false);
const defaultstartTime = ref([moment()
			.locale('zh-cn')
			.format('YYYY-MM-DD') + ' 8:30']);

const defaultendTime = ref([moment()
			.locale('zh-cn')
			.format('YYYY-MM-DD') + ' 18:00']);
const checked = ref(true);
const { proxy } = getCurrentInstance();
const { absence_type } = proxy.useDict('absence_type');
const userOptions = ref([]);
const csrData = ref([]);
const overWorkHour = ref(0);
const offsetTime = ref(0);
const print = ref(null);
const sprData = ref({
	headImg: '',
	label: ''
});
const qjDetail = ref({})
const printerContent = ref({})
const printDivdyAll= ref({
		id: 'printDivdyAll',
		popTitle: '和盛华科技有限公司',
		extraCss: '',
		extraHead: '<meta http-equiv="Content-Language" content="zh-cn"/>',
});

const qjzt = ref({
	1: { color: '#FA6400', lable: '待审核',img:'dsh' },
	2: { color: '#1AC45F', lable: '通过',img:'ok' },
	3: { color: '#BE1A21', lable: '未通过',img:'btg' },
	4: { color: '#FA6400', lable: '销假待审核' },
	5: { color: '#999999', lable: '已销假' },
	6: { color: '#BE1A21', lable: '销假未通过' },
});
const checkAbsenceDuration = (rule, value, callback) => {
	if (!value) {
		return callback(new Error('输入请假时长'));
	} else {
		const reg = /^[0-9]+([.]{1}[0-9]{1})?$/;
		if (reg.test(value)) {
			callback();
		} else {
			return callback(new Error('请输入整数或者一位小数'));
		}
	}
};

const data = reactive({
	qjForm:{
		startTime: '',
		endTime: '',
		type: '',
		absenceDuration: 0,
		reason: '',
		approveId: '',
		copyIds: [],
		sabbaticalHour :0,
	},
	xjForm:{
		reportBackDuration: '',
		reportBackTime: '',
		reportBackReason: '',
	},
	queryParams: {
		pageNum: 1,
		pageSize: 10,
		type: 'my'
	},
	xjRules:{
		reportBackDuration: [
			{
				required: true,
				message: '输入销假时长',
				trigger: 'blur'
			},
			{
				validator: checkAbsenceDuration,
				trigger: 'blur'
			}
		],
		reportBackTime: [
			{
				required: true,
				message: '请选择销假时间',
				trigger: 'change'
			}
		],
		reportBackReason: [
			{
				required: true,
				message: '请输入备注',
				trigger: 'blur'
			}
		]
	}
});

const makeRange = (start: number, end: number) => {
  const result: number[] = []
  for (let i = start; i <= end; i++) {
    result.push(i)
  }
  return result
}
const disabledHours = () => {
  return makeRange(0, 7).concat(makeRange(19,23))
}
const disabledMinutes = (hour: number) => {
  if (hour === 8 ) {
    return makeRange(0,29)
  }
  if (hour === 11 ) {
    return makeRange(31,59)
  }
  if (hour === 18 ) {
    return makeRange(1,59)
  }
  // if (hour === 18) {
  //   return makeRange(00, 59)
  // }
}
const disabledSeconds = (hour: number, minute: number) => {
	  // return makeRange(00, 30)
  // if (hour === 8 && minute === 30) {
  //   return makeRange(1, 59)
  // }
}
const { queryParams,qjForm,xjRules,xjForm } = toRefs(data);
const qjRules = reactive({
	type: [
		{
			required: true,
			message: '请选择项目类型',
			trigger: 'blur'
		}
	],
	endTime: [
		{
			required: true,
			message: '请选择结束时间',
			trigger: 'blur'
		}
	],
	startTime: [
		{
			required: true,
			message: '请选择开始时间',
			trigger: 'blur'
		}
	],
	reason: [
		{
			required: true,
			message: '输入请假原因',
			trigger: 'blur'
		}
	],
	approveId: [
		{
			required: true,
			message: '请选择审核人',
			trigger: 'change'
		}
	],
	copyIds: [
		{
			required: true,
			message: '请选择抄送人',
			trigger: 'blur'
		}
	],
	absenceDuration: [
		{
			required: true,
			message: '输入请假时长',
			trigger: 'blur'
		}
	]
});


onMounted(() => {

});
watch(qjForm.value, (newV, oldV) => {
    if (newV) {
		if(newV.startTime.indexOf('01')>-1){
			newV.startTime = moment(newV.startTime).format('YYYY-MM-DD HH:30')
		}
		if(newV.endTime.indexOf('01')>-1){
			newV.endTime = moment(newV.endTime).format('YYYY-MM-DD HH:30')
		}
    }
}, { immediate: true });
watch(xjForm.value, (newV, oldV) => {
    if (newV) {
		if(newV.reportBackTime.indexOf('01')>-1){
			newV.reportBackTime = moment(newV.reportBackTime).format('YYYY-MM-DD HH:30')
		}
    }
}, { immediate: true });

const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
		if(checked.value){
			if(qjForm.value.absenceDuration>overWorkHour.value || qjForm.value.absenceDuration==overWorkHour.value  ){
				qjForm.value.sabbaticalHour=overWorkHour.value
			}else{
				qjForm.value.sabbaticalHour=qjForm.value.absenceDuration
			}
		}else{
			qjForm.value.sabbaticalHour = 0
		}
		let form = JSON.parse(JSON.stringify(qjForm.value ))
		form.applyId = userId.value
		form.copyIds = form.copyIds.toString();
		if(form.absenceId){
			updateAbsence(form).then(res=>{
				if(res.code =='200'){
					   ElMessage({ message: '申请成功！', type: 'success', duration: 1 * 1000 })
					   getList()
					   qjDialogVisible.value = false
				}else{
					ElMessage({ message: res.msg, type: 'error', duration: 1 * 1000 })
				}
			})
		}else{
			absenceAdd(form).then(res=>{
				if(res.code =='200'){
					   ElMessage({ message: '申请成功！', type: 'success', duration: 1 * 1000 })
					   getList()
					   qjDialogVisible.value = false
				}else{
					ElMessage({ message: res.msg, type: 'error', duration: 1 * 1000 })
				}
			})
		}

    } else {
    }
  })
}
const submitXjForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
		let form = JSON.parse(JSON.stringify(xjForm.value ))
		form.absenceId = qjDetail.value.absenceId
		if(form.id){
			editReportBack(form).then(res=>{
				if(res.code =='200'){
					   ElMessage({ message: '修改成功！', type: 'success', duration: 1 * 1000 })
					   getList()
					   xjDialogVisible.value = false
				}else{
					ElMessage({ message: res.msg, type: 'error', duration: 1 * 1000 })
				}
			})
		}else{
		absencerReportBack(form).then(res=>{
			if(res.code =='200'){
				   ElMessage({ message: '申请成功！', type: 'success', duration: 1 * 1000 })
				   getList()
				   xjDialogVisible.value = false
			}else{
				ElMessage({ message: res.msg, type: 'error', duration: 1 * 1000 })
			}
		})
		}


    } else {
    }
  })
}
const delForm = (row) => {
  ElMessageBox.confirm(
  '确定删除选定的记录吗?',
    '提示',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  ).then(() => {
	  deleteAbsence(row.absenceId).then(res => {
	  	if (res.code == 200) {
			ElMessage({
			  type: 'success',
			  message: '删除成功',
			});
			getList()
	  	} else {
			ElMessage({
			  type: 'warning',
			  message: res.errmsg,
			})
	  	}
	  });
    })
}
function edit(absenceId){
	qjDialogVisible.value = true
	getAbsenceDetail({absenceId:absenceId}).then(res=>{
		if (res.code == 200) {
		qjForm.value = res.data.absence
		qjForm.value.copyIds = res.data.absence.copyIds.split(',')
	    // qjForm.value.copyIds= qjForm.value.copyIds.map(Number);
		copyChange( qjForm.value.copyIds)
		appoversChange(qjForm.value.approveId)
		} else {
			ElMessage({
			  type: 'warning',
			  message: res.errmsg,
			})
		}
	})
}
function reportBack(absenceId ){

	xjDialogVisible.value = true
	getAbsenceDetail({absenceId:absenceId}).then(res=>{
		if (res.code == 200) {
			absence_type.value.map(item=>{
				if(item.value == res.data.absence.type){
					res.data.absence.type = item.label
					qjDetail.value = res.data.absence
				}
			})
			if(res.data.reportBack){
				// let data = res.data.reportBack
				 xjForm.value  = res.data.reportBack
			}
			if(res.data.auditList){
				auditList.value = res.data.auditList
			}
		} else {
			ElMessage({
			  type: 'warning',
			  message: res.errmsg,
			})
		}
	})
}


function detail(absenceId){
	detailDialogVisible.value = true;
	getAbsenceDetail({ absenceId: absenceId }).then(res => {
		if (res.code == 200) {
			absence_type.value.map(item=>{
				if(item.value == res.data.absence.type){
					res.data.absence.type = item.label
					qjDetail.value = res.data.absence
				}
			})
			if(res.data.reportBack){
				 xjDetail.value  = res.data.reportBack
			}
			if(res.data.auditList){
				auditList.value = res.data.auditList
			}
		} else {
			ElMessage({
				type: 'warning',
				message: res.errmsg
			});
		}
	});
}

function printerrow2(absenceId){
	getAbsenceDetail({absenceId:absenceId}).then(res=>{
			if (res.code == 200) {
				printerContent.value = res.data.absence;
				// printerContent.value.reallytime = (printerContent.value.absenceDuration - printerContent.value .sabbaticalHour).toFixed(1);
				nextTick(()=>{
					print.value.click()
				})
			} else {
				ElMessage({
				  type: 'warning',
				  message: res.errmsg,
				})
			}
		})
	// console.log()
}

function getList() {

	loading.value = true;
	getAbsenceList(queryParams.value).then(response => {
		typeList.value = response.rows;
		typeList.value.map(item=>{
			item.isLookXj = isLookXj(item.endTime)
		})



		total.value = response.total;
		loading.value = false;
	});
}
function appoversChange(data) {
	let arr = userOptions.value.filter(item => {
		if (item.value == data) {
			return item;
		}
	});
	sprData.value = arr[0];
}
function copyChange(data) {
	csrData.value=[]
	data.map(item => {
		userOptions.value.map(item2 => {
			if (item == item2.value) {
				csrData.value.push(item2);
			}
		});
	});
}
function qjTypehx(value){

}
function approval() {
	if(ruleFormRef.value){
		ruleFormRef.value.resetFields()
	}
	qjForm.value.copyIds=[]
	csrData.value=[]
	userOptions.value.forEach(ele => {
		if (ele.roles.indexOf('hr') >-1 ) {
		qjForm.value.copyIds.push(ele.value)
			csrData.value.push({
				headImg: ele.headImg,
				label: ele.label
			});

		}
	});
	sprData.value=[]
	qjDialogVisible.value = true;
}
function getUserSelect() {

	getUserOptions({
		userId: userId.value
	}).then(res => {
		userOptions.value = res.data;
		userOptions.value.forEach(ele => {
			if (ele.headImg) {
				// debugger
				ele.headImg = import.meta.env.VITE_APP_BASE_API + ele.headImg;
			} else {
				ele.headImg = headurl;
			}
		});
		//从首页跳过来的
		if (proxy.$route.query.isSy) {
			approval()
		}

	});
}
function startTimeChange(value){
	if (qjForm.value.endTime) {
		let sTime = moment(value).valueOf();
		let eTime = moment(qjForm.value.endTime).valueOf();
		if (sTime > eTime) {
			ElMessage({
				message: '开始时间不能大于结束时间',
				type: 'error'
			});
			qjForm.value.startTime = '';
		}else{
			getqjDuration(value,qjForm.value.endTime)
		}
	}
}
function endTimeChange(value){
	if (qjForm.value.startTime) {
		let sTime = moment(qjForm.value.startTime).valueOf();
		let eTime = moment(value).valueOf();
		if (sTime > eTime) {
			ElMessage({
				message: '开始时间不能大于结束时间',
				type: 'error'
			});
			qjForm.value.endTime = '';
		}else{
			getqjDuration(qjForm.value.startTime,value)
		}
	}
}
function xjChange(value) {
	let sTime = moment(qjDetail.value.startTime).valueOf();
	let eTime = moment(qjDetail.value.endTime).valueOf();
	let dqTime = moment(value).valueOf();
	if (sTime <= dqTime && dqTime <= eTime) {
		let form = {
			startTime:value,
			endTime:qjDetail.value.endTime,
		}
		getDuration(form).then(res=>{
			if(res.code===200){
				xjForm.value.reportBackDuration = res.duration
			}else{
				ElMessage({
					message: res.msg,
					type: 'error'
				});
			}
		})
	} else {
		ElMessage({
			message: '销假时间必须在请假时间范围内',
			type: 'error'
		});
		xjForm.value.reportBackTime = '';
	}
}
function getqjDuration(start,end){
	let form = {
		startTime:start,
		endTime:end,
	}
	getDuration(form).then(res=>{
		if(res.code===200){
			qjForm.value.absenceDuration = res.duration
			//这是申请表里的显示

		}else{
			ElMessage({
				message: res.msg,
				type: 'error'
			});
		}
	})
}
function getOverTime(){
	getOverworkHour({
		userId:userId.value
	}).then(res => {
		if (res.code == 200) {
			overWorkHour.value = res.data.overworkHour;
		}
	});
}
function handleTime(){
	let year = new Date().getFullYear()
	let month = new Date().getMonth()+1
	let day = new Date().getDate()
	return new Date(year, month,day, 8, 30, 0)
}
function isLookXj(endTime) {
		let daDate = moment(new Date())
			.add('year', 0)
			.format('YYYY-MM-DD');
		let daDate11 = moment(new Date())
			.add('year', 0)
			.format('YYYY-MM-11');
		const diffEnd = moment(daDate).diff(moment(daDate11), 'days') > 0;
		//11号之前上个月的都能看
		if (!diffEnd) {
			if (
				moment(endTime).format('YYYY-MM') ==
					moment(daDate)
						.add(-1, 'months')
						.format('YYYY-MM') ||
				moment(endTime).format('YYYY-MM') ==
					moment(new Date())
						.add('year', 0)
						.format('YYYY-MM')
			) {
				return true;
			} else {
				return false;
			}
		} else {
			//11号之后
			if (moment(endTime).month() + 1 == moment().month() + 1) {
				return true;
			} else {
				return false;
			}
		}
	}
getUserSelect();
getList();
getOverTime();
</script>

<style lang="scss" scoped>
.qjButtonBox {
	padding: 20px 30px;
	padding-top: 0px;
	padding-left: 0px;
}
.qjBut {
	background: #be1a21;
	color: #ffffff;
	width: 100px;
	text-align: center;
	border-radius: 4px;
	padding: 10px 0;
	font-size: 0.875rem;
	cursor: pointer;
}
.dialog-footer button:first-child {
	margin-right: 10px;
}
:deep(.el-form) {
	display: flex;
	.left {
		.el-input {
			height: 40px;
		}
		// height: 100px;
		border-right: 2px dashed #e5e1e1;
	}
}
.userOption {
	// display: flex;
	align-items: center;

	border-radius: 50%;
	display: flex;
	align-items: center;

	img {
		width: 30px;
		height: 30px;
		border-radius: 50%;
		object-fit: cover;
	}

	span {
		padding: 0 1rem;
	}
}
.sxm {
	margin-top: 20px;
}
.spBox,
.spBox2 {
	display: flex;
	flex-flow: column;

	p {
		margin-top: 0;
	}
	img {
		width: 45px;
		height: 45px;
		object-fit: cover;

		border-radius: 50%;
	}
}
.spBox2 {
	margin-right: 20px;
}
:deep(.left) {
	width: 50%;
	.el-form-item {
		display: flex;
		flex-flow: column;
	}
}
:deep(.right) {
	margin-left: 50px;
	width: 42%;
	.el-input {
		height: 40px;
	}
	.el-form-item {
		display: flex;
		flex-flow: column;
	}
	.spr,
	.csr {
		margin-bottom: 10px;
		.el-form-item__label {
			width: 70px !important;
		}
	}
}
.csrBox {
	margin-top: 20px;
	display: flex;
	max-height: 235px;
	overflow: auto;
	display: flex;
	flex-flow: wrap;
}
.csrBox::-webkit-scrollbar {
	display: none; /* Chrome Safari */
}
:deep(.qjTable) {
	height: calc(100% - 120px);
	// min-height: 400px;
	overflow: auto;
	.el-table__header-wrapper,
	.el-table__fixed-header-wrapper {
		th {
			word-break: break-word;
			background-color: #f7f7f7 !important;
			color: #515a6e;
			height: 58px !important;
			font-size: 13px;
			border: none !important;
		}
	}
	.el-table__body-wrapper {
		.el-button [class*='el-icon-'] + span {
			margin-left: 1px;
		}
		.el-table__row {
			td {
				border: none !important;
				height: 55px;
				cursor: pointer;
			}
		}
	}
}
.ztbox {
	display: flex;
	align-items: center;
	justify-content: center;
	.dian {
		margin-right: 8px;
		width: 7px;
		height: 7px;
		border-radius: 50%;
	}
}
.czan {
	display: flex;
	justify-content: center;
}
#printDivdyAll {
	margin-top: -23px;
	width: 1000px;
	height: 400px;
	padding: 5px;

	td {
		text-align: center;
		font-size: 18px;
	}

	.zhai {
		height: 60px;
	}

	.shense {
		font-size: 20px;
	}

	table {
		width: 100%;
		height: 100%;
	}
}
.zBox {
	height: 99.8%;
	background-color: #ffffff;
	border-radius: 10px;
	padding: 20px;
}
:deep(.shbj) {
	background: url(../../assets/images/spbj.png) no-repeat;
	color: #be1a21;
	width: 140px;
	background-size: 100% 100%;
	padding: 5px 15px;
	font-size: 14px;
	margin-bottom: 10px;
	font-weight: 600;
}
.sptop {
	margin-top: 20px;
}
:deep(.bz) {
	.el-form-item__label {
		width: 50px !important;
	}
}
</style>
<style>
.el-time-spinner .el-scrollbar:nth-child(2) .el-scrollbar__view.el-time-spinner__list li {
	display: none;
}
.el-time-spinner .el-scrollbar:nth-child(2) .el-scrollbar__view.el-time-spinner__list li:nth-child(1) {
	display: block;
}
.el-time-spinner .el-scrollbar:nth-child(2) .el-scrollbar__view.el-time-spinner__list li:nth-child(31) {
	display: block;
}
.jdbox {
	position: relative;
}
.jdbox:last-child .xuLine {
	display: none;
}
.spzt {
	width: 20px;
	height: 20px;
	display: inline-block;
	background-size: contain;
	margin-right: 10px;
}
.xuLine {
	position: absolute;
	width: 1px;
	height: 17px;
	border-left: 2px dashed rgb(204, 204, 204);
	left: 9px;
	top: 20px;
}
.ytg {
	background: url(../../assets/images/mainImg/ok.png);
	background-size:100% 100% ;
}
.dsh {
	background: url(../../assets/images/mainImg/dsh.png);
	background-size:100% 100% ;
}
.btg {
	background: url(../../assets/images/mainImg/btg.png);
	background-size:100% 100% ;
}
</style>
